function $(dom) {
  return document.querySelector(dom)
}
// 人物原地跑
let timer = null
// 人物移动跑
let timer2 = null
// 滚动条
let timer3 = null
// 存储赛道障碍物的数组
let topArr = [], centerArr = [], bottomArr = []
// 开始游戏
$('#startButton').onclick = function () {
  $('#start').remove()
  document.documentElement.scrollLeft = 0
  move()
  obstacle()
  down()
  characterMove()
}
// 人物跑动
function move() {
  let images = $("#images")
  let index = 1
  timer = setInterval(() => {
    index == 4 ? index = 1 : index++
    images.src = `imgs/runner_${index}.png`
  }, 100)
}
// 随机障碍物
function obstacle() {
  let num1 = num2 = num3 = 0;
  for (let i = 0; i < 5; i++) {
    topArr.push({ bottom: 110, left: num1 += Math.floor(Math.random() * 700 + 400) })
    centerArr.push({ bottom: 86, left: num2 += Math.floor(Math.random() * 700 + 400) })
    bottomArr.push({ bottom: 55, left: num3 += Math.floor(Math.random() * 700 + 400) })
  }
  topArr.forEach(item => {
    $("#runway1").innerHTML += `<span class="obstacle" style="left:${item.left}px;bottom:${item.bottom}px;"></span>`
  })
  centerArr.forEach(item => {
    $("#runway2").innerHTML += `<span class="obstacle" style="left:${item.left}px;bottom:${item.bottom}px;"></span>`
  })
  bottomArr.forEach(item => {
    $("#runway3").innerHTML += `<span class="obstacle" style="left:${item.left}px;bottom:${item.bottom}px;"></span>`
  })
}
// 改变跑步的赛道
function down() {
  let character = $("#runner")
  document.onkeydown = function (e) {
    let bottom = getComputedStyle(character, null)['bottom']
    if (e.key == 'ArrowUp') {
      if (bottom == '55px') {
        character.style.bottom = '86px'
        character.style.transform = 'scale(0.75) translateY(14px)'
      } else {
        character.style.bottom = '110px'
        character.style.transform = 'scale(0.5) translateY(34px)'
      }
    } else if (e.key == 'ArrowDown') {
      if (bottom == '110px') {
        character.style.bottom = '86px'
        character.style.transform = 'scale(0.75) translateY(14px)'
      } else {
        character.style.bottom = '55px'
        character.style.transform = 'scale(1) translateY(0)'
      }
    } else if (e.key == ' ') {
      let runner = $("#runner")
      let images = $("#images")
      let bottom = getComputedStyle(runner, null)['bottom']
      let bottomNum = Number(bottom.substring(0, bottom.length - 2))
      if (bottomNum == 55 || bottomNum == 86 || bottomNum == 110) {
        timer = clearInterval(timer)
        images.src = `imgs/runner_1.png`
        if (bottomNum == 55) {
          runner.style.animation = '0.4s jump1'
        } else if (bottomNum == 86) {
          runner.style.animation = '0.4s jump2'
        } else if (bottomNum == 110) {
          runner.style.animation = '0.4s jump3'
        }
        setTimeout(() => {
          runner.style.animation = 'none'
          move()
        }, 400)
      }
    }
  }
}
// 人物向右移动
function characterMove() {
  let index = 0
  let index2 = 0
  let character = $("#runner")
  let gameMap = $("#game")
  let arr = [...topArr, ...centerArr, ...bottomArr]
  // 人物移动
  timer2 = setInterval(() => {
    // 地图移动
    index2 <= -3712 ? index2 = -3712 : index2 -= 2
    gameMap.style.left = index2 + 'px'
    // 人物移动
    index >= 4700 ? clearInterval(timer2) : index += 2
    character.style.left = index + 'px'
    // 判断位置是否重叠
    let bottom = getComputedStyle(character, null)['bottom']
    let bottomNum = Number(bottom.substring(0, bottom.length - 2))
    let flg = arr.some(item => {
      if ((item.left - index > 0 && item.left - index < 3) && (item.bottom == bottomNum)) {
        return true
      }
    })
    // 斜坡上路
    if (index >= 4700) {
      if (bottomNum == 55 || bottomNum == 120) {
        character.style.animation = "move1 2s forwards"
      } else if (bottomNum == 86 || bottomNum == 140) {
        character.style.animation = "move2 2s forwards"
      } else if (bottomNum == 110 || bottomNum == 150) {
        character.style.animation = "move3 2s forwards"
      }
      // 动画结束后显示火炬
      setTimeout(() => {
        timer = clearInterval(timer)
        $(".pyres").src = 'imgs/pyre_fire.svg'
        // 重新开始
        setTimeout(() => {
          $('.hide').style.display = "block"
          $(".success").style.display = "block"
          $('.error').style.display = "none"
        }, 500)
      }, 1800)
    }
    if (flg) {
      timer = clearInterval(timer)
      timer2 = clearInterval(timer2)
      $('.hide').style.display = "block"
      $(".success").style.display = "none"
    }
    // 背景显示
    if (index >= 683) {
      $('#points #amazon').style.opacity = 1
      $('#panels #amazonPanel').style.opacity = 1
    }
    if (index >= 1483) {
      $('#points #bahia').style.opacity = 1
      $('#panels #bahiaPanel').style.opacity = 1
    }
    if (index >= 2283) {
      $('#points #parana').style.opacity = 1
      $('#panels #paranaPanel').style.opacity = 1
    }
    if (index >= 3083) {
      $('#points #saopaulo').style.opacity = 1
      $('#panels #saopauloPanel').style.opacity = 1
    }
    if (index >= 3883) {
      $('#points #rio').style.opacity = 1
      $('#panels #rioPanel').style.opacity = 1
    }
  }, 1)
}
// 重新开始
$('#restartButton').onclick = function () {
  location.reload()
}